<template>
    <div>
        <!-- 页面头部 start -->
		<div class="header w990 bc mt15">
			<div class="logo w990">
				<h2 class="fl"><a href="index.html"><img src="~/assets/images/logo.png" alt="京西商城"></a></h2>
				<div class="flow fr flow3">
					<ul>
						<li>1.我的购物车</li>
						<li>2.填写核对订单信息</li>
						<li class="cur">3.成功提交订单</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 页面头部 end -->

		<div style="clear:both;"></div>

		<!-- 主体部分 start -->
		<div class="success w990 bc mt15">
			<div class="success_hd">
				<h2>订单提交成功</h2>
			</div>
			<div class="success_bd">
				<p><span></span>订单提交成功，我们将及时为您处理</p>
				<p><button @click="pay">立即支付</button></p>
				<p>
                    <qriously :value="value" :size="size" :backgroundAlpha="backgroundAlpha"/>
					<img id="qrious">
				</p>
				<p class="message">完成支付后，你可以 <a href="">查看订单状态</a> <a href="">继续购物</a> <a href="">问题反馈</a></p>
			</div>
		</div>
		<!-- 主体部分 end -->

		<div style="clear:both;"></div>
    </div>
</template>

<script>
import VueQriously from 'vue-qriously';
import payApi from '~/api/pay.js'


import '~/assets/style/success.css'

export default {
    asyncData({query}){
        console.log(query.sn)
        return{
            sn:query.sn
        }
    },
    data(){
        return{
             // 可以自定义，必填项。
            value: 'http://itcast.cn/',
            // 二维码大小 默认 100
            size: 200,
            // 背景透明度，默认透明 0 
            backgroundAlpha:1,
			//定时对象
			timer: null,
			countTimer: 0
        }
    },
    created(){
        
    },
    methods:{
        //立即支付
        pay: function () {
            payApi.pay(this.sn).then(res => {
                //判断提交支付订单是否成功
                if (res.data.errno == 0) {

                    this.value = res.data.wxurl

                    //开始定时检查二维码状态
                    this.timer = setInterval(this.checkQrCodeStatus, 1000);

                } else {
                    alert(res.data.errmsg);
                }
            })
        },
        //定时方法
        checkQrCodeStatus:function(){
            //定时器加法
            this.countTimer++;
            //判断，如果超过5s,认为支付失败
            if(this.countTimer>5){
                //取消定时
                clearInterval(this.timer);
                //跳转支付失败页面
                // location.href = "payFail.html";
                 this.$router.push('/order/fail')
            }
            
            //发送请求，检查二维码的状态
            payApi.queryStatus(this.sn).then(res=>{
                //判断是否成功
                if(res.data.pay_status==1){
                    //取消定时
                    clearInterval(this.timer);
                    //跳转支付成功页面
                    // location.href = "paySuccess.html";
                    this.$router.push('/order/success')
                }
            })
        }
    }
}
</script>

<style>

</style>
